import { Form, Input, message, Modal } from 'antd';

import suggestService from '@/api/services/setting/suggestService';
import UploadPicture from '@/components/upload-picture';

import { SuggestType } from './type';

import { ModalProps } from '#/entity';

export function IndexModal({ title, show, formValue, onOk, onCancel }: ModalProps<SuggestType>) {
  const [form] = Form.useForm();

  const onFinish = (values: any) => {
    const transData = {
      answer: values.answer,
    };
    suggestService.update(formValue.id, transData).then((res) => {
      if (res > 0) {
        onOk();
        message.success('回答成功');
      }
    });
  };

  const modalRender = (dom: React.ReactNode) => (
    <Form
      initialValues={formValue}
      form={form}
      labelCol={{ span: 4 }}
      wrapperCol={{ span: 18 }}
      onFinish={onFinish}
      clearOnDestroy
      layout="horizontal"
      // layout="vertical"
    >
      {dom}
    </Form>
  );

  return (
    <Modal
      width={600}
      title={title}
      open={show}
      onCancel={onCancel}
      okButtonProps={{ autoFocus: true, htmlType: 'submit' }}
      destroyOnClose
      modalRender={modalRender}
    >
      <Form.Item name="title" label="反馈标题">
        <Input.TextArea disabled />
      </Form.Item>
      <Form.Item name="textual" label="反馈内容">
        <Input.TextArea disabled />
      </Form.Item>
      <Form.Item name="contactName" label="反馈人">
        <Input disabled />
      </Form.Item>
      <Form.Item name="fileId" label="反馈图片">
        <UploadPicture
          disabled
          maxCount={1}
          portraitList={formValue.file ? [formValue.file] : []}
        />
      </Form.Item>
      <Form.Item name="answer" label="回答" rules={[{required:true,message:'请输入回答内容'}]}>
        <Input.TextArea disabled={formValue.answer !== undefined} />
      </Form.Item>
    </Modal>
  );
}
